<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style>
        * {
            font-family: 'Microsoft JhengHei' !important;
        }

        .reveal pre code {
            background-color: #120;
        }

        h5, h6 {
            text-transform: none !important;
        }

        h6 {
            text-align: start;
            line-height: 50px !important;
            font-size: 22px !important;
        }

        xmp {
            margin: 0;
            background: #120;
            color: #fff;
            margin-top: 16px;
            display: block;
        }
    </style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h4>小课堂[萌新分院]</h4>
            <h4>angular的核心思想是什么，怎么体现到代码中？</h4>
            <h4>分享人：张晓琳</h4>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <h6>
                    angular的简介<br>
                    以前开发（web或者移动端）前端主要使用jQuery+原生js,如果使用某些前端UI框架的话，<br>
                    它自己还可能提供一些API可以使用。而且目前很多UI框架都是基于jQuery的，<br>
                    所以说一下由jQuery跨到angularjs跨度较大，研究了一段时间的angularjs ,下面从整体上说说感受吧:<br>
                </h6>
            </section>
            <section>
                <h6>
                    关于和jquery的比较<br>
                    首先angular是一个mvc框架，它与jquery不同之处在于，前者致力于mvc代码解耦，<br>
                    采用model,controller以及view方式去组织代码，而后者提供给你了很多APi函数，<br>
                    你可以不用写很多原生js去实现比较复杂的效果，比如说动画，$.animate,这样的效果如果需要原生js来写的话，代码量将会比较庞大;<br>
                    其次，jQuery没有定义你的代码如何组织，你可以将它放在一个单独的js文件中进行引用，<br>
                    也可以直接写在页面中采用script标签进行包裹，甚至可以直接以内联的方式写在html标签中，<br>
                </h6>
            </section>
            <section>
                <h6>
                    但是angularjs会将一个HTML页面分成若干个模块，每个模块都可以自己的scope，service以及directive，<br>
                    各个模块之间也可以进行通信，但是整体上结构是比较清晰的，就是说其代码组织方式是模块化的。<br>
                    最后，jQuery的思想是先设计好页面，然后在已有页面的基础上进行dom操作后展示页面，<br>
                    但是angular的view可能仅仅是一个框架，对view的dom操作或者时间监听都是在directive中实现的，<br>
                    而且一般情况下很少自己直接去写Dom操作代码，只要你监听model。model发生变化后view也会发生变化。<br>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <h6>
                    1.  angular JS的核心特征：<br>
                    1>. 代码组织结构清晰<br>
                    AngularJS模块划分明确，不同的代码有其明确的存放处，可读性强，便于维护和扩展（后面会有代码组织结构图）。<br>
                    2>. 功能模块易测试<br>
                    AngularJS的代码方便测试。虽然代码易测试不能成为一个框架闪光的决定性因素，但是反向思考，如果写出来的代码可测试性差将会使工作效率事倍功半。<br>
                    3>. 双向绑定<br>
                    双向绑定的出现，无可争议的大大简化了你的代码量，与其说是技术的革新，不如说是一场思想上的颠覆与突破。<br>
                    回想jQuery还需要通过在DOM中找到需要的元素并在其上添加事件监听，通过触发事件（如点击等）才能解析获取DOM元素中的值。<br>
                    而在AngularJS中只需要将DOM中的元素与js的某个属性绑定，js属性值变化会同步到DOM元素上，同样的，DOM元素值得变化也会映射到js的属性上。<br>
                </h6>
            </section>
            <section>
                <h6>
                    <img src="../img/angular的核心思想是什么/demo.png" height="361" width="526"/></section>
            <section>
                <h6>
                    1. AngularJs四大核心理念：MVC,模块化，指令系统，双向数据绑定<br>
                    2. 分别用程序解释AngularJs四大核心理念：<br>
                    MVC，数据模型层，视图层，控制层<br>
                    并且多了一个和as同名的属性，然后把自己指向这个属性，就方便我们访问了。<br>
                </h6>
            </section>
            <section>
                <h6>
                    2. 数据绑定<br>
                    典型的DOM操作，都是先将数据处理完毕之后，再通过元素上设置innerHTML将结果插入到所要的DOM中;<br>
                    这样的工作重复性很高，还要确保界面和javascript属性中获取到数据时正确的状态。 <br>
                    而在angular中一但建立双向绑定，使用者输入，会由Angular自动传到一个变量中，<br>
                    再自动读到所有绑到它的内容，更新它，效果上就是立即的资料同步， <br>
                    在程式码中修改变量，也会直接反应到呈现的试图上。<br>
                </h6>
            </section>
            <section>
                <h6>
                    如：<br>

                    <a href="../demo/angular的核心思想是什么/demo.html" target="_blank">demo</a>
                    input的值（用户的输入）与greeting.text绑定在一起，并及时呈现在中。<br>
                    绑定是双向的，也可用通过设置$scope.greeting.text的值，并自动同步到输入框和双大括号（{{}}）中<br>
                </h6>
            </section>
            <section>
                <h6>

                     3.依赖注入<br>
                    AngularJS提供$scope方式来处理Controller<br>
                    依赖注入)是一种软件设计模式,用于处理如何让程序获得其依赖(对象的)引用,提高代码的重用性和灵活性<br>
                    如:
                    $scope对象吧数据绑定自动通过HelloController构造函数传递给开发者，$scope并不是我们唯一需要的，还可以添加一个$location对象，
                    <a href="../demo/angular的核心思想是什么/demo.html" target="_blank">demo</a>
                </h6>
            </section>
            <section>
                <h6>
                    4.模块化<br>
                    代码模块化，每个模块的代码独立拥有自己的作用域，model，controller等。<br>
                </h6>
            </section>
            <section>
                <h6>
                    5.指令<br>
                    Angular包括一个强大的DOM转换引擎，使得开发者有能力扩展HTML语法。<br>
                    在之前的实例中我们看到{{}}是用绑定数据的，ng-controller是用来指定哪个控制器来服务哪个视图，<br>
                    ng-model将一个输入框绑定到模型部分。我们称之为HTML扩展指令。<br>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>3.常见问题</h3>
            </section>
            <section>
                <h6>
                    如何在代码中体现？<br>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>4.解决方案</h3>
            </section>
            <section>
                <h6>
                    <a href="../demo/angular的核心思想是什么/demo2.html" target="_blank">demo</a>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>5.编码实战</h3>
            </section>
        </section>
        <section>
            <section>
                <h3>6.扩展思考</h3>
            </section>
            <section>
                <h5>例子里面的angular是如何运行的？每个指令都做了什么</h5>
            </section>
            <section>
                <h6>
                    1. ng-app告诉Angular管理页面的那一部分。根据需要ng-app也可以放在上面<br>
                    2. ng-controller  Javascript类叫做控制器，它可以管理相应页面区域中的任何东西。<br>
                    3. ng-repeat   ng-repeat代表为items数组中每个元素拷贝一次该DIV中的DOM，同时设置item作为当前元素，并可在模板中使用它。<br>
                    4. <span ng-bind="goods.goodsID"></span>   表达式{{goods.goodsID}}检索迭代中的当前项，并将当前项的title属性值插入到DOM中<br>
                    5. ng-model  ng-model定义输入字段和item.quantity之间的数据绑定<br>
                    6. <span ng-bind="goods.goodsPrice*goods.count"></span>  总价就是单价乘以数量<br>
                    7. <span ng-bind="goods.goodsPrice*goods.count| currency"></span> 单价和总价格式化成美元形式。<br>
                    通过Angular的currency过滤器进行美元形式的格式化。<br>
                    8. ng-click="remove($index)"  通过ng-repeat的迭代顺序$index，移除数据和相应的DOM（双向绑定特性）
                    9. app.controller("myCtrl",["$scope",function ($scope) {  ..这里写管理购物车的逻辑 }]) <br>
                    $scope 就是用来把数据绑定到界面上的元素
                </h6>
            </section>
            <section>
                <h6>
                    $scope.goodses=[ <br>
                    {goodsID:1,goodsName:"商品A",goodsPrice:12,count:1,subtotal:12},<br>
                    {goodsID:2,goodsName:"商品B",goodsPrice:18,count:1,subtotal:18},<br>
                    {goodsID:3,goodsName:"商品C",goodsPrice:13,count:1,subtotal:13},<br>
                    {goodsID:4,goodsName:"商品D",goodsPrice:8,count:1,subtotal:8},<br>
                    {goodsID:5,goodsName:"商品E",goodsPrice:10,count:1,subtotal:10},];<br>
                    通过定义$scope.goodses，我们已经创建一个虚拟数据代表了用户购物车中物品集合，购物车是不能仅工作在内存中，也需要通知服务器端持久化数据。<br>
                    $scope.remove = function(index) {$scope.goodses.splice(index, 1);};<br>
                    remove()函数能够绑定到界面上，因此我们也把它增加到$scope中<br>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>7.参考文献</h3>
            </section>
            <section style="text-align: left">
                <h6><a href="https://www.tuicool.com/articles/aiMvQb3" class=" wrap external" target="_blank" rel="nofollow noreferrer">angularjs</a></h6>
            </section>
        </section>
        <section>
            <section>
                <h3>8.更多讨论</h3>
            </section>
            <section>
                <h4>.........</h4>
            </section>
        </section>
        <section>
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                By
                <small style="vertical-align: middle">张晓琳</small>
            </p>
        </section>
    </div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
